<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="bootstrap//js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css">

<style>
  html,body{
    background-color: #f1f1f1;
    
  }
  #movable-div {
  width: 200px;
  height: 200px;
  background-color: #f00;
  position: absolute;
  cursor: pointer;
  z-index: 9999;
}
</style>
</head>
<body>
    <div id="movable-div">Drag Me!</div>
<div class="container">
    <header id="header" style="position:relative;">
        <div class="header-content">
            <div style="width: 400px;display:flex">
              <img src="img/logo.jpeg" style="width: 96px;">
            </div>

  
              <p>搜索</p>
 
        </div>
    </header>
    <nav class="navbar navbar-expand-sm">

        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              公司概况
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">公司简介</a>
              <a class="dropdown-item" href="#">领导班子</a>
              <a class="dropdown-item" href="#">组织机构</a>
            </div>
          </li>
       
          <!-- Dropdown -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
            新闻中心
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">吉事要闻</a>
              <a class="dropdown-item" href="#">吉事速递</a>
              <a class="dropdown-item" href="#">吉事聚焦</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              党的建设
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">党建工程</a>
              <a class="dropdown-item" href="#">纪检监督</a>
              <a class="dropdown-item" href="#">群团工作</a>
              <a class="dropdown-item" href="#">党建云空间</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
         经营发展
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">项目发展</a>
              <a class="dropdown-item" href="#">工程建设</a>
              <a class="dropdown-item" href="#">安全生产</a>
              <a class="dropdown-item" href="#">经营管理</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
    企业文化
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">华电文化</a>
                <a class="dropdown-item" href="#">公司宣传片</a>
                <a class="dropdown-item" href="#">基层风貌</a>
                <a class="dropdown-item" href="#">VI手册</a>
            </div>
          </li>
        </ul>
      </nav>
      <section>
        <div id="demo" class="carousel slide" data-ride="carousel" style="margin-top: 5px;"> 
 
            <!-- 指示符 -->
            <ul class="carousel-indicators">
              <li data-target="#demo" data-slide-to="0" class="active"></li>
              <li data-target="#demo" data-slide-to="1"></li>
              <li data-target="#demo" data-slide-to="2"></li>
            </ul>
           
            <!-- 轮播图片 -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg" style="width: 100%;">
              </div>
              <div class="carousel-item">
                <img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" style="width: 100%;">
              </div>
              <div class="carousel-item">
                <img src="https://static.jyshare.com/images/mix/img_mountains_wide.jpg" style="width: 100%;">
              </div>
            </div>
           
            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
              <span class="carousel-control-next-icon"></span>
            </a>
           
          </div>
      </section>
      <section style="background-color: #fff;margin-top: 5px;">
        <div class="d-flex">
            <div style="width: 32%;height: 300px;">
                <div id="demo" class="carousel slide" data-ride="carousel" style="margin-top: 5px;"> 
 
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                      <li data-target="#demo" data-slide-to="0" class="active"></li>
                      <li data-target="#demo" data-slide-to="1"></li>
                      <li data-target="#demo" data-slide-to="2"></li>
                    </ul>
                   
                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg" style="width: 100%;">
                      </div>
                      <div class="carousel-item">
                        <img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" style="width: 100%;">
                      </div>
                      <div class="carousel-item">
                        <img src="https://static.jyshare.com/images/mix/img_mountains_wide.jpg" style="width: 100%;">
                      </div>
                    </div>
                   
                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                      <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                      <span class="carousel-control-next-icon"></span>
                    </a>
                   
                  </div>
            </div>
            <div style="width: 32%;margin: 0 2%;">
                <h2>吉事要闻</h2>
                <div class="list-group">
                  <a href="#" class="list-group-item list-group-item-action">First item</a>
                  <a href="#" class="list-group-item list-group-item-action">Second item</a>
                  <a href="#" class="list-group-item list-group-item-action">Third item</a>
                  <a href="#" class="list-group-item list-group-item-action">Third item</a>
                  <a href="#" class="list-group-item list-group-item-action">Third item</a>
                </div>
            </div>
            <div style="width: 32%;margin: 0 2%;">
                <h2>登录入口</h2>
                <div class="list-group">
                  <a href="#" class="list-group-item list-group-item-action">OA</a>
                  <a href="#" class="list-group-item list-group-item-action">Second item</a>
                  <a href="#" class="list-group-item list-group-item-action">Third item</a>
                  <a href="#" class="list-group-item list-group-item-action">Third item</a>
                  <a href="#" class="list-group-item list-group-item-action">Third item</a>
                </div>
            </div>
        </div>
      </section>
      <section style="background-color: #fff;">
        <div class="jumbotron" style="margin-top:5px">
            <h1>宣传口号</h1>
          </div>
      </section>
</div>

</body>
<script>
    $(function() {
  var isDragging = false;
  var currentElement = null;
 
  $('#movable-div').mousedown(function(e) {
    isDragging = true;
    currentElement = $(this);
    offsetX = e.clientX - currentElement.offset().left;
    offsetY = e.clientY - currentElement.offset().top;
  });
 
  $(document).mousemove(function(e) {
    if (isDragging) {
      currentElement.css('left', (e.clientX - offsetX) + 'px');
      currentElement.css('top', (e.clientY - offsetY) + 'px');
    }
  });
 
  $(document).mouseup(function(e) {
    if (isDragging) {
      isDragging = false;
    }
  });
});
</script>
</html>